<template>
  <div id="app">
    <h1>根组件</h1>
    <span>库存总数:</span>
    <!-- <input type="text" v-model="$store.state.num"> -->
    <input type="text" :value="num" @input="inputFn">
    <!-- v-model = v-bind + v-on -->
    <div style="border:1px solid black; width: 300px;">
      <AddItem/>
    </div>
    <hr>
    <div style="border:1px solid black; width: 300px;">
      <SubItem/>
    </div>
  </div>
</template>

<script>
import AddItem from './components/AddItem'
import SubItem from './components/SubItem'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'App',
  computed: {
    /* mapState两种传参数区别
    1. 数组：不能对state中变量重命名
    2. 对象：可以对state中变量重命名，
            属性名是留在原地的计算属性的名字，
            属性值是要映射的state数据变量的名字
    */
    ...mapState(['num'])
    // ...mapState({
    //   a: 'num'
    // })
  },
  components: {
    AddItem,
    SubItem
  },
  methods: {
    ...mapMutations(['setNum']),
    inputFn (e) {
      // this.$store.commit('setNum', +e.target.value)
      this.setNum(+e.target.value)
    }
  }
}
</script>

<style>
#app {
  width: 300px;
  margin: 20px auto;
  border:1px solid #ccc;
  padding:4px;
}
</style>
